<template>
  <div class="loading">
    <img
      id="loading-bg"
      class="loading-bg"
      src="https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/loading/bg.png"
      @load="onBgLoad"
    />
    <div class="loading-progress">
      <div class="loading-progress-bar" :style="{ width: width }"></div>
      <div class="loading-progress-value">{{ percent }}%</div>
    </div>
    <div id="loading-bubble" class="loading-bubble"></div>
    <audio
      :src="this.defaultConfig.audioBubble"
      autoplay="autoplay"
      loop="loop"
      preload="auto"
      hidden="true"
    ></audio>
  </div>
</template>

<script>
import { Particle, Data } from "@/utils/animation";
export default {
  name: "loading",
  data() {
    return {
      width: 0,
      percent: 0,
      particles: [],
      data: new Data(),
    };
  },
  methods: {
    onBgLoad() {
      //人为设置延迟0.5秒启动加载
      let that = this;
      setTimeout(() => {
        that.updateLoading();
        that.$root.$children[0].$data.change.createChange(that.data.change);
      }, 500);
    },
    updateLoading() {
      let max = 0;
      let path = this.data.getAllPath();
      max += path.length;
      for (let key in this.defaultConfig) {
        if (this.defaultConfig[key].toString().indexOf("https") > -1) {
          max++;
          path.push(this.defaultConfig[key]);
        }
      }
      let count = 0;
      let that = this;
      for (let i = 0; i < path.length; i++) {
        let img = document.createElement("img");
        img.src = path[i];
        img.onload = function () {
          setTimeout(() => {
            count++;
            that.percent = ((count / max) * 100).toFixed(0);
            that.width = (count / max) * 6.625 + "rem";
            if (that.percent > 95) {
              setTimeout(() => {
                location.href = "#/home";
              }, 100);
            }
          }, i * 10);
        };
      }
    },
    createBubble() {
      let url =
        "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/loading/bubble.png";
      let particle_1 = new Particle();
      particle_1.minX = 0;
      particle_1.maxX = 300;
      particle_1.minY = 20;
      particle_1.maxY = 50;
      particle_1.maxCount = 10;
      particle_1.minLifeTime = 20000;
      particle_1.maxLifeTime = 30000;
      particle_1.minSpeed = 0.8;
      particle_1.maxSpeed = 1.2;
      particle_1.createPartical(url, document.getElementById("loading-bubble"));
      let particle_2 = new Particle();
      particle_2.minX = 0;
      particle_2.maxX = 300;
      particle_2.minY = 300;
      particle_2.maxY = 400;
      particle_2.maxCount = 20;
      particle_2.minLifeTime = 20000;
      particle_2.maxLifeTime = 30000;
      particle_2.minSpeed = 0.6;
      particle_2.maxSpeed = 1.2;
      particle_2.createPartical(url, document.getElementById("loading-bubble"));
      let particle_3 = new Particle();
      particle_3.minX = 0;
      particle_3.maxX = 300;
      particle_3.minY = 500;
      particle_3.maxY = 600;
      particle_3.maxCount = 20;
      particle_3.minLifeTime = 30000;
      particle_3.maxLifeTime = 40000;
      particle_3.minSpeed = 0.6;
      particle_3.maxSpeed = 1.2;
      particle_3.createPartical(url, document.getElementById("loading-bubble"));

      this.particles.push(particle_1);
      this.particles.push(particle_2);
      this.particles.push(particle_3);
    },
  },
  beforeDestroy() {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].destroyPartical();
    }
  },
  async mounted() {
    this.createBubble();
    //清空致敬数据
    localStorage.removeItem("YspFinishHonor");
  },
};
</script>

<style>
.loading {
  width: 375px;
}
.loading-bg {
  width: 375px;
  height: 750px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
}
.loading-progress {
  width: 106px;
  height: 6px;
  position: fixed;
  left: 134.5px;
  top: 330px;
  z-index: 1;
  background: #486fb3;
  box-shadow: 0px 3px 7px 0px rgba(10, 77, 24, 0.35);
  border-radius: 6px;
}
.loading-progress-bar {
  height: 6px;
  background: linear-gradient(0deg, #6bc7f7, #aaeeff);
  border-radius: 6px;
}
.loading-progress-value {
  position: fixed;
  left: 50%;
  top: 340px;
  transform: translate(-50%, 0);
  color: white;
}
.loading-bubble {
  position: fixed;
  left: 0;
  top: 100%;
  z-index: 2;
}
</style>